<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/3/15
  Time: 13:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax请求</title>
    <%--引入jquery库，引入代码在使用之前--%>
    <script type="text/javascript" src="${basePath}static/jquery-1.12.4/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        // 进行ajax的引擎
        function doAjax() {
            $.ajax({
                // 请求的类型：get/post/put/delete
                type: "GET",
                // 设置发送到服务器的连接（form表单的action属性）
                url: "ajaxdemo1",
                // 发送的表达数据（类似于getUrl的写法，
                // 对于form表单可以使用jquery的fromId.serialize() 将form表单中的表单数据进行序列化处理）
                //data: "name=John&location=Boston",
                // 回调函数
                success: function(data, textStatus, jqXHR){
                    // 进行dom标签控件操作
                    // 进行dom操作
                    //document.getElementById("lbMsg").innerHTML = xmlhttp.responseText;
                    $("#lbMsg").html("data:"+data+";textStatus:"+textStatus+";jqXHR:"+jqXHR.responseText);
                }
            });
        }

        // 进行ajax的引擎
        function doAjax2() {
            // jquery get方法进行ajax的get请求
            $.get("ajaxdemo1", function(data, textStatus, jqXHR){
                    // 进行dom标签控件操作
                    $("#lbMsg").html("data:"+data+";textStatus:"+textStatus+";jqXHR:"+jqXHR.responseText);
            });
        }
    </script>
</head>
<body>
<form>
    <input type="button" onclick="doAjax2()" value="原生ajax请求">
<label id="lbMsg"></label>
</form>
</body>
</html>
